<template>
  <div class="container">
    <!--    <div class="rowIndex">-->
    <!--      <div class="cellIndex">-->
    <!--        <div>-->
    <!--          <div class="topTop">-->
    <!--            <div class="topLeft">-->
    <!--              <i class="el-icon-s-promotion"></i>-->
    <!--              <el-cascader-->
    <!--                style="width: 100px"-->
    <!--                v-model="address"-->
    <!--                placeholder="区域"-->
    <!--                @change="getWeather3d"-->
    <!--                :options="regionOptions"-->
    <!--                size="mini"-->
    <!--                :show-all-levels="false"-->
    <!--                clearable-->
    <!--                filterable></el-cascader>-->
    <!--              <div style="margin-top: 15px;margin-left: 15px">-->
    <!--                <span id="temp">温度</span>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--            <div class="topRight">-->
    <!--              &lt;!&ndash;              <i class="el-icon-light-rain"></i>&ndash;&gt;-->
    <!--              <img style="width: 40px;height: 40px" :src="require(`@/assets/weatherIcons/${iconDay}.svg`)">-->
    <!--            </div>-->
    <!--          </div>-->
    <!--          <div class="weatherExt">-->
    <!--            <div>-->
    <!--              <div class="topWeatherExt">{{ sunrise }}</div>-->
    <!--              <div class="bottomWeatherExt">日出时间</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="topWeatherExt">{{ sunset }}</div>-->
    <!--              <div class="bottomWeatherExt">日落时间</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="topWeatherExt">{{ textDay }}</div>-->
    <!--              <div class="bottomWeatherExt">日间天气</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="topWeatherExt">{{ textNight }}</div>-->
    <!--              <div class="bottomWeatherExt">晚间天气</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="cellIndex">-->

    <!--      </div>-->
    <!--    </div>-->
    <div class="rowIndex">
      <div class="cellIndex">
        <el-calendar v-model="calendarValue">
          <div
            slot="dateCell"
            slot-scope="{ data }"
          >
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
            </p>
          </div>
        </el-calendar>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="centerDialogVisible"
      width="40%"
      center>
      <el-form ref="addForm" :model="formData" label-width="80px">
        <el-form-item label="标题名称">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="formData.link"></el-input>
        </el-form-item>
        <el-form-item label="计划说明">
          <el-input type="textarea" v-model="formData.description"></el-input>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm()">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 89vh; /* 占据整个视口的高度 */
}

.rowIndex {
  display: flex;
  flex: 1; /* 使行平分高度 */
}

.cellIndex {
  flex: 1; /* 使单元格平分宽度 */
  border: 1px #ccc; /* 可选，用于查看边界 */
  /*display: block */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  box-sizing: border-box; /* 包括边框和内边距 */
}

.weatherExt {
  flex: 1; /* 使单元格平分宽度 */
  border: solid #ccc; /* 可选，用于查看边界 */
  background: #8c939d;
  border-radius: 15px;
  display: flex;
  font-size: small;
  width: 300px;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-family: 楷体;
  margin-top: 20px;
}

.topWeatherExt {
  margin-top: 10px;
  margin-left: 12px;
  color: white;
}

.bottomWeatherExt {
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.topTop {
  flex: 1; /* 使单元格平分宽度 */
  display: flex;
  font-size: large;
  font-family: 楷体;
  margin-top: 20px;
  margin-left: 20px;
}

.topRight {
  margin-left: auto;
  font-size: 50px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.is-selected {
  color: #1989FA;
}
</style>

<script>
import {DatePicker} from 'element-ui';
import {
  getRedisRegionList
} from "@/api/region/region";
import {
  getWeather3d
} from "@/api/weather/weather";
import {
  listPlan, addPlan, updatePlan
} from "@/api/system/plan";
import {
  currentUser
} from "@/api/system/user"

export default {
  name: "Index",
  components: {
    'el-date-picker': DatePicker
  },
  data() {
    return {
      formType: null,
      loginUserId: null,
      //清空内容，重新获取
      formData: {
        title: "",
        link: "",
        description: ""
      },
      formShowFlag: false,
      dialogTitle: '提示',
      centerDialogVisible: false,
      calendarValue: new Date(),
      regionUndefinedFlag: true,
      sunrise: null,
      sunset: null,
      textDay: null,
      textNight: null,
      tempMin: null,
      tempMax: null,
      iconDay: 100,
      weatherList: [],
      address: [],
      regionOptions: [],
      weather: {
        summary: '加载中...',
        temperature: '--'
      }
    };
  },
  created() {
    this.getCurrentUser();
    // this.getRegionOptions();
    // this.getWeather3d();
  },
  watch: {
    calendarValue(newValue, oldValue) {
      this.changeCalendar();
    }
  },
  methods: {
    getCurrentUser() {
      currentUser().then(response => {
        this.loginUserId = response.data.userId;
      })
    },
    submitForm() {
      this.centerDialogVisible = false;
      if ('add' == this.formType) {
        const params = this.formData;
        params.bindDate = this.getDate(new Date());
        params.addUserId = this.loginUserId;
        addPlan(params).then(response => {
          const code = response.code;
          if (200 == code) {
            this.$message('保存计划成功');
          } else {
            this.$message.error('保存计划失败');
          }
        })
      } else if ('edit' == this.formType) {
        const params = this.formData;
        updatePlan(params).then(response => {
          const code = response.code;
          if (200 == code) {
            this.$message('更新计划成功');
          } else {
            this.$message.error('更新计划失败');
          }
        })
      }
    },
    getDate(dateToFormat) {
      const year = dateToFormat.getFullYear();
      const month = dateToFormat.getMonth() < 10 ? '0' + dateToFormat.getMonth() : dateToFormat.getMonth();
      const day = dateToFormat.getDate() < 10 ? '0' + dateToFormat.getDate() : dateToFormat.getDate();
      const formattedDate = year + '-' + month + '-' + day;
      return formattedDate;
    },
    changeCalendar() {
      this.centerDialogVisible = true;
      const currentDate = this.getDate(new Date());
      const calendarValueDate = this.getDate(this.calendarValue);
      if (currentDate == calendarValueDate) {
        this.dialogTitle = '今日计划：'
      } else {
        this.dialogTitle = '当日计划：'
      }
      const params = {"bindDate": calendarValueDate, "addUserId": 1}
      console.log("bindDate")
      console.log(calendarValueDate)
      listPlan(params).then(response => {
        if (response.code == 200 && response.rows.length != 0) {
          this.formData = response.rows[0];
          this.formType = 'edit'
        } else {
          //清空内容，重新获取
          this.formData = {
            title: "",
            link: "",
            description: ""
          }
          this.formShowFlag = true;
          this.formType = 'add';
        }
      })
    },
    getRegionOptions() {
      getRedisRegionList().then(response => {
        this.regionOptions = response.data;
      })
    },
    getWeather3d() {
      console.log("当前address为" + this.address)
      if (this.address.length != 0) {
        console.log("上边")
        var addressLabel = '';
        console.log("this.address:" + this.address)
        const provinceCode = this.address[0];
        const cityCode = this.address[1];
        const areaCode = this.address[2];
        this.regionOptions.forEach(item => {
          if (provinceCode == item.value) {
            addressLabel += item.label;
            const arrCity = item.children;
            arrCity.forEach(item1 => {
              if (cityCode == item1.value) {
                addressLabel += item1.label;
                const arrArea = item1.children;
                arrArea.forEach(item2 => {
                  if (areaCode == item2.value) {
                    addressLabel += item2.label;
                  }
                })
              }
            })
          }
        })
      } else if (this.regionUndefinedFlag) {
        console.log("下边")
        this.address = ['33', '3301', '330110'];
        this.regionUndefinedFlag = false;
        addressLabel = '浙江省杭州市余杭区'
      } else {
        addressLabel = '';
        this.iconDay = 100;
      }
      const params = {address: addressLabel}
      getWeather3d(params).then(response => {
        if (response.data != null) {
          this.weatherList = response.data.daily;
          var todayWeather = this.weatherList[0];
          if (this.weatherList) {
            this.textNight = todayWeather.textNight;
            this.textDay = todayWeather.textDay;
            this.sunrise = todayWeather.sunrise;
            this.sunset = todayWeather.sunset;
            const temp = todayWeather.tempMin + '°~' + todayWeather.tempMax + '°'
            document.getElementById('temp').textContent = temp;
            this.iconDay = todayWeather.iconDay;
            console.log("this.iconDay: " + this.iconDay)
          }
        } else {
          this.textNight = '';
          this.textDay = '';
          this.sunrise = '';
          this.sunset = '';
          document.getElementById('temp').textContent = '温度';
        }
        console.log(this.weatherList)
      })
    },
  }
};
</script>
